<template>
	<div>
		<div class="container d-flex justify-content-center" v-if="isShow"
			style="position: absolute; top: 8%;display: flex;justify-content: center;align-items: center;flex-direction: column; width: 80vw">
			<div class="row w-100" :style="{
			'background-image': `url(${acTive.img})`,
			'height': '450px',
			'background-size': 'cover',
			'border-radius': '40px'
		}">
				<!-- 左边按钮 -->
				<div class="d-flex align-items-center text-light px-2 m-4" @click="handleClode"
					style="height: 13%; background-color: #68779d;width: auto;border-radius: 40px;">
					<img class="mx-2" style="width: 15%;" src=" https://www.fluxmq.com/static/img/back.2cbdd9e8.svg"
						alt="">
					<div style="width: 100px;font-size: .9em;" class="text-left">返回文章列表</div>
				</div>
			</div>
			<div class="row p-4 text-left"
				style="position: relative; top: -200px;width: 95%;border-radius: 30px; background-color: #fff;min-height:500px ;">
				<div>
					<div class="mb-2" style="font-weight: 700;">{{ acTive.time }}</div>
					<div style="font-size: 1.6em;color: #1d6bff;font-weight: 700;">{{ acTive.title }}</div>
					<div class="mt-4">
						<div class="mb-2" style="font-size: 1em;color: #8fd5fc;">背景</div>
						<div style="font-size: .9em;">{{ acTive.content }}</div>
						<div>更多内容省略.............</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		isShow: {
			typeof: Boolean,
			default: () => { }
		},
		acTive: {
			typeof: Object,
			default: () => { }
		}
	},
	methods: {
		handleClode() {
			this.$emit('handleClode')
		}
	}

}
</script>

<style lang="scss" scoped></style>